<template>
    <div class="main">
        <van-notify id="editor-notify" />
        <van-dialog id="van-dialog" />
        <van-cell-group inset>
            <xin-swipe-cell :title="card.title" :label="card.description" v-for="(card, index) in auditXinCards"
                :key="card._id" :button="swipeBtn" @click="XinClick($event, card, index)">
            </xin-swipe-cell>
        </van-cell-group>
        <van-empty class="empty" v-if="!auditXinCards.length" image="search" description="没有需要审核的心语签" />
        <div class="flex-1"></div>
        <pagination :value="pageIndex" @change="changePage"></pagination>

    </div>
</template>

<script>
import { mapState } from "vuex";
import $store from "@/store/index.js";
import card from "@/pages/index/card.vue";
import vanCellGroup from "@/wxcomponents/weapp/dist/cell-group/index";
import vanEmpty from "@/wxcomponents/weapp/dist/empty/index";
import vanCell from "@/wxcomponents/weapp/dist/cell/index";
import vanOverlay from "@/wxcomponents/weapp/dist/overlay/index";
import Notify from "@/wxcomponents/weapp/dist/notify/notify";
import Dialog from "@/wxcomponents/weapp/dist/dialog/dialog";
export default {
    components: {
        vanCellGroup,
        vanCell,
        vanOverlay,
        card,
        vanEmpty,
    },
    computed: {
        ...mapState({
            auditXinCards: (state) => state.manager.auditXinCards,
            index: (state) => state.manager.index,
            pageIndex: (state) => state.manager.auditXinCards.index + 1,
        }),
        selectXin() {
            return this.auditXinCards[this.dialog.selectIndex];
        },
    },
    methods: {
        changePage(index) {
            return this.auditXinCards.$to(index - 1);
        },
        XinClick(detail, { _id }, index) {
            console.log(detail);
            switch (detail.name) {
                case "审核":
                    console.log(_id);
                    this.audit(_id);
                    break;
                case "查看":
                    this.showXin(index);
            }
        },
        showXin(index) {
            this.dialog.selectIndex = index;
            $store.commit("changeEditingXin", this.selectXin);
            wx.navigateTo({ url: "../editor/index" });
        },
        audit(id) {
            Dialog.confirm({
                selector: "#van-dialog",
                title: "审核心语签",
                message: "确认审核完成",
            })
                .then(() =>
                    Notify({
                        type: "success",
                        message: "正在处理中",
                        selector: "#editor-notify",
                    })
                )
                .then(() => $store.dispatch("confirmPublic", [id]))
                .then(() =>
                    Notify({
                        type: "success",
                        message: "审核成功",
                        selector: "#editor-notify",
                    })
                )
                .catch((err) =>
                    Notify({
                        type: "danger",
                        message: "审核失败",
                        selector: "#editor-notify",
                    }).then(() => console.log(err))
                );
        },
        getUnPublicXin() {
            Notify({
                type: "success",
                message: "加载中，请稍等",
                selector: "#editor-notify",
            });
            return this.auditXinCards
                .$next()
                .then(() => {
                    Notify({
                        type: "success",
                        message: "加载完成",
                        selector: "#editor-notify",
                    });
                })
                .catch((err) => {
                    console.log(err);
                    Notify({
                        type: "danger",
                        message: "加载发生了错误",
                        selector: "#editor-notify",
                    });
                });
        },
    },
    data() {
        return {
            swipeBtn: [
                {
                    type: "primary",
                    name: "审核",
                },
                {
                    type: "primary",
                    name: "查看",
                },
            ],
            dialog: {
                show: false,
                selectIndex: 0,
            },
        };
    },
    mounted() {
        this.auditXinCards.$to(0);
    },
};
</script>

<style lang="less" scoped>
.main {
    display: flex;
    flex-direction: column;

    height: 100%;
}

.showCard {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
